import React, { Component } from 'react';

import store from './store';

import axios from 'axios';
class App extends Component {

  componentDidMount(){
    fetch('/banner/list').then(res => res.json()).then(res => {
      // console.log(res.data);
      // 将请求成功的数据放在全局状态管理中
      store.dispatch({type: 'change_banner_list', payload: res.data})
    })

    axios.get('/pro/list').then(res => {
      console.log(res.data.data);
      store.dispatch({type: 'change_pro_list', payload: res.data.data})
    })
  }

  render() {

    // 当使用了状态模块那么获取值的时候需要先 .模块名
    console.log(store.getState().app.count);
    return (
      <div>

       <div>
        <h1>渲染 app 数据 -- {store.getState().app.count}</h1>
        <button onClick={()=>{
          // 执行修改方法的时候无需 .模块名，直接进行调用执行即可
          store.dispatch({type: 'add'})
        }}>加 1</button>
        <button onClick={()=>{
          store.dispatch({type: 'reduce'})
        }}>减 1</button>
        <button onClick={()=>{
          store.dispatch({type: 'addNum', payload: 8})
        }}> 加指定数 </button>
        <button onClick={()=>{
          store.dispatch({type: 'reduceNum', payload: 8})
        }}> 减指定数 </button>
       </div>


       <div>
        <h1>渲染 pro 数据</h1>
        {store.getState().pro.bannerList.map(item => {
          return (<p key={item.bannerid}>
            <img src={item.img} style={{height: 100}} alt="" />
          </p>)
        })}


        {store.getState().pro.proList.map(item => {
          return (<p key={item.proid}> {item.proname} </p>)
        })}

       </div>

      </div>
    );
  }
}

export default App;
